<!--催收员回款月报表-->
<template>
  <div class="page">
    <data-box ref="databox" :params="params" row-key="id" :server="server.search" autoSearch @resetForm="resetDeadline">
      <!--输入区域-->
      <template slot="input">
        <el-form-item label="催收员账号" prop="userName">
          <el-input v-model="params.userName"></el-input>
        </el-form-item>
        <el-form-item label="起止日期" prop="deadlineTime">
          <div class="block">
            <el-date-picker v-model="deadlineTime" class="daterange-large" type="daterange" :editable="false" range-separator="~" @change="selectTime">
            </el-date-picker>
          </div>
        </el-form-item>
      </template>
      <!--数据列区域-->
      <template slot="column">
        <el-table-column type="index" label="序号" width="60">
        </el-table-column>
        <el-table-column prop="userName" label="催收员账号" min-width="80">
        </el-table-column>
        <el-table-column prop="realName" label="催收员名称" min-width="80">
        </el-table-column>
        <el-table-column prop="total" label="还款金额（元）" min-width="50">
        </el-table-column>
        <el-table-column prop="nowDate" label="日期" min-width="60">
        </el-table-column>
      </template>
      <!--按钮区域-->
      <template slot="button">
        <el-button @click="exportReport">导出</el-button>
      </template>
    </data-box>

  </div>
</template>
<script>
  import DataBox from '@/components/DataBox'
  import servers from '@/config/servers'
  import { downloadFile } from '@/util/common'
  import net from '@/util/net'
  export default {
    name: 'realtime-report',
    data() {
      return {
        server: {
          search: servers.ReportManage.get_back_money_report,
          exportReport: servers.ReportManage.export_report
        },
        params: {
          userName: '',
          realName: '',
          nowDate: '',
          reportType: '2',
          total: '',
          startDate: '',
          endDate: ''
        },
        deadlineTime: []
      }
    },
    methods: {
      /**
       * 导出报表
       */
      exportReport() {
        net.send({
          server: this.server.exportReport,
          data: this.params
        }).then((data) => {
          // 接口返回的数据
          if (data) {
            downloadFile(data, '月报表')
          } else {
            this.$message({
              type: 'info',
              message: '暂无数据'
            })
          }
        }, err => {
          this.$message({
            type: 'info',
            message: err.reason
          })
        })
      },
      // 重置起止时间
      resetDeadline() {
        this.deadlineTime = ''
      },
      /**
       * 发布时间的change事件获取
       */
      selectTime() {
        console.log(this.nowDate)
        if (this.deadlineTime[0] === null) {
          this.params.startDate = ''
          this.params.endDate = ''
        } else {
          this.params.startDate = this.deadlineTime[0]
          this.params.endDate = this.deadlineTime[1]
        }
        console.log(this.params.endDate)
      }
    },
    components: {
      DataBox
    }
  }

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>


</style>
